<template>
	<view>
		<me-tabs v-model="current" :tabs="tabs" @change="tabChanged" :fixed="true"></me-tabs>
		<mescroll-body ref="mescrollRef" top="90rpx" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view v-if="current == 0" class="bg-fff mx12 br10" v-for="(item, index) in pageList" :key="index" @tap="pushDetaile(item.id)">
				<view class="dis-flex flex-align-center bb mt10 px10 py10">
					<view class="flex c-333 fs14 fwb">模板名称：{{item.title}}</view>
					<!-- <view class="right c-common fs14 fw600">{{getStateName(item.status)}}</view> -->
				</view>
				<view class="py10 after-line px10">
					<th-message-view title="创建时间" titleColor="#333" :size="28" :detail="$u.timeFormat(item.createtime, 'yyyy-mm-dd')" paddingY="10" detailColor="#999">
					</th-message-view>
					<th-message-view title="模板查看" titleColor="#333" :size="28" detail="点击查看" @click="fileLook(item.file)" paddingY="10" detailColor="#5B769F">
					</th-message-view>
				</view>
				<view class="px10  py10 dis-flex flex-align-center" style="flex-direction: row-reverse;">
					<view class="bg-common c-fff br5 fs15 ml10 center lh35 fw500" style="width: 180rpx;" @click.stop="addTemplete(item.id)">发起合同</view>
				</view>
			</view>
			<view v-else class="bg-fff mx12 br10" v-for="(item, index) in pageList" :key="index" @tap="pushDetaile(item.id)">
				<view class="dis-flex flex-align-center bb mt10 px10 py10">
					<view class="flex c-333 fs14 fwb">合同编码：{{item.htnum}}</view>
				</view>
				<view class="py10 after-line px10">
					<th-message-view title="甲方" titleColor="#333" :size="28" :detail="item.partyA" paddingY="10" detailColor="#999">
					</th-message-view>
					<th-message-view title="乙方" titleColor="#333" :size="28" :detail="item.partyB" paddingY="10" detailColor="#999">
					</th-message-view>
					<th-message-view title="签约人群" titleColor="#333" :size="28" :detail="item.sign_type == 1?'个人':'企业'" paddingY="10" detailColor="#999">
					</th-message-view>
					<!-- <th-message-view title="待签约者手机号" titleWidth="230rpx" titleColor="#333" :size="28" :detail="item.mobile" paddingY="10" detailColor="#999">
					</th-message-view>
					<th-message-view title="创建时间" titleColor="#333" :size="28" :detail="$u.timeFormat(item.createtime, 'yyyy-mm-dd')" paddingY="10" detailColor="#999">
					</th-message-view> -->
				</view>
				<view class="px10 pb10 dis-flex flex-align-center" style="flex-direction: row-reverse;">
					<view class="bg-common c-fff br5 fs15 ml10 center lh35 fw500" style="width: 180rpx;" @click.stop="addTempleteTwo(item.id)">申请链接</view>
					<view class="bg-common c-fff br5 fs15 ml10 center lh35 fw500" style="width: 180rpx;" v-if="item.file" @click.stop="fileLook(item.file)">查看合同</view>
				</view>
			</view>
		</mescroll-body>
		
		<!-- 删除订单弹窗 -->
		<u-popup :show="addPopup" mode="center" :round="20" @close="addPopup=false" overlayOpacity="0.3">
			<view class="lh44 fwb center bb fs16">发起合同</view>
			<view class="popView br20 bg-fff">
				<view class="bb px15 py10">
					<u-input placeholder="请输入甲方" border="none" fontSize="30" v-model="subData.jiafang" :clearable="true"
						type="text" maxlength="30">
						<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 190rpx;"><text
								class="c-red">*</text>甲方</view>
					</u-input>
				</view>
				<view class="bb px15 py10">
					<u-input placeholder="请输入乙方" border="none" fontSize="30" v-model="subData.yifang" :clearable="true"
						type="text" maxlength="30">
						<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 190rpx;"><text
								class="c-red">*</text>乙方</view>
					</u-input>
				</view>
				<view class="bb px15 py10 dis-flex">
					<view class="c-333 fs14 dis-flex" style="width: 190rpx;"><text
							class="c-red">*</text>签约人群</view>
					<u-radio-group v-model="subData.sign_type" size="40">
						<u-radio activeColor="#5B769F" shape="circle" name="1" label="个人" labelSize="28"></u-radio>
						<view class="ml10">
							<u-radio activeColor="#5B769F" shape="circle" name="2" label="企业" labelSize="28">
							</u-radio>
						</view>
					</u-radio-group>
				</view>
				<view class="bb px15 py10">
					<u-input placeholder="请输入待签约者手机号" border="none" fontSize="30" v-model="subData.mobile" :clearable="true"
						type="text" maxlength="11">
						<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 230rpx;"><text
								class="c-red">*</text>待签约者手机号</view>
					</u-input>
				</view>
				<view class="dis-flex flex-align-center px16 mt20">
					<button class="btn-submit c-fff " style="background: #4A94E6;" @tap="addSubmit" :loading="loginLoading">发起</button>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import validate from "@/common/thformvalidate";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				tabs: ['合同模板', '合同列表'],
				current: 0 ,// 当前tab下标
				
				pageList: [],
				id:'',
				addPopup:false,
				subData:{
					jiafang:'',
					yifang:'',
					mobile:'',
					sign_type:'1'
				},
				loginLoading:false,
			}
		},
		
		methods: {
			
			tabChanged(index){
				this.current = index;
				this.pageList = [];
				this.mescroll.resetUpScroll();
			},
			
			downCallback(){
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				},1000);
			},
			
			upCallback(page) {
				let mUrl = this.current == 0 ? this.$config.UrlGetTemplete : this.$config.UrlAddContractList;
				this.$http.post(mUrl,{
				},{log:true,header: {
						'content-type': 'application/json'
					}}).then((res) => {
						if(this.current == 0){
							let datalist = res?.data || []
							if (page.num == 1) this.pageList = [];
							this.pageList.push.apply(this.pageList, datalist);
							this.mescroll.endBySize(datalist.length, datalist.length);
						}else{
							let datalist = res?.data?.data || []
							if (page.num == 1) this.pageList = [];
							this.pageList.push.apply(this.pageList, datalist);
							this.mescroll.endBySize(datalist.length, res?.data?.total);
						}
				}).catch((err) => {
					this.mescroll.endErr();
				})
			},
			
			addTemplete(id){
				this.id = id;
				this.addPopup = true;
			},
			
			addTempleteTwo(id){
				this.$api.openWindow('/pages/center/contractEdit?id='+id);
			},
			
			addSubmit(){
				var rule = [
					{
						name: "jiafang",
						notnull: true,
						checkType: "",
						title: "甲方"
					},
					{
						name: "yifang",
						notnull: true,
						checkType: "",
						title: "乙方"
					},
					{
						name: "mobile",
						notnull: true,
						checkType: "phone",
						title: "待签约者手机号"
					}
				];
				var formData = {
					...this.subData,
					ids:this.id
				};
				if (!validate.check(formData, rule)) return;
				this.loginLoading = true;
				this.$http.post(this.$config.UrlAddTemplete, formData, {
					log: true,
					header: {
						'content-type': 'application/json'
					}
				}).then((res) => {
					this.$api.toast(res.msg);
					if (res.code == 1) {
						this.addPopup = false;
						this.subData = {
							jiafang:'',
							yifang:'',
							mobile:'',
							sign_type:'1'
						};
					}
				}).finally((res) => {
					this.loginLoading = false;
				})
			},
			
			fileLook(src){
				this.$api.openWindow('/pages/center/fileLook?src='+src);
			},
			
			//刷新页面
			refreshList(){
                this.mescroll.resetUpScroll();
			}
		}
	}
</script>

<style scoped>
	.popView{width:650rpx;padding-bottom: 20rpx;}
	.btn-minis{border-radius: 40rpx;height: 50rpx;;line-height: 50rpx;font-size: 26rpx;min-width: 100rpx;}
</style>
